<template>
  <div class="message-container">
    <!-- 导航栏 -->
    <t-navbar title="消息" :fixed="true" class="custom-navbar">
      <template #right>
        <t-button theme="default" variant="text" @click="startNewChat">
          <icon-font name="add" class="nav-icon" />
        </t-button>
      </template>
    </t-navbar>

    <!-- 消息列表 -->
    <div class="message-list">
      <!-- 聊天消息 -->
      <div class="section-title">聊天消息</div>
      <div class="chat-list">
        <div
            v-for="chat in chatList"
            :key="chat.id"
            class="chat-item"
            @click="openChat(chat)"
        >
          <div class="avatar-wrapper">
            <img :src="chat.avatar" class="avatar" />
            <div v-if="chat.unread" class="unread-badge">{{ chat.unread }}</div>
          </div>
          <div class="chat-info">
            <div class="chat-header">
              <div class="username">{{ chat.name }}</div>
              <div class="time">{{ formatTime(chat.lastTime) }}</div>
            </div>
            <div class="last-message">
              <span v-if="chat.lastMessageType === 'text'">
                {{ chat.lastMessage }}
              </span>
              <span v-else class="media-message">
                <icon-font :name="getMediaIcon(chat.lastMessageType)" />
                {{ getMediaLabel(chat.lastMessageType) }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统通知 -->
      <div class="section-title">系统通知</div>
      <div class="notice-list">
        <div
            v-for="notice in systemNotices"
            :key="notice.id"
            class="notice-item"
            :class="{ unread: !notice.read }"
            @click="viewNotice(notice)"
        >
          <div class="notice-icon">
            <icon-font name="notification" />
          </div>
          <div class="notice-content">
            <div class="notice-title">{{ notice.title }}</div>
            <div class="notice-time">{{ formatTime(notice.time) }}</div>
            <div class="notice-text">{{ notice.content }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮按钮 -->
    <div class="float-action">
      <t-button shape="circle" theme="primary" @click="startNewChat">
        <icon-font name="edit" />
      </t-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "dayjs";

// 聊天列表数据
const chatList = ref([
  {
    id: 1,
    name: "游戏小仙女",
    avatar: "https://tse2-mm.cn.bing.net/th/id/OIP-C.g5MgjmRcOiMpqZ7kPYVRHAHaHY?rs=1&pid=ImgDetMain",
    lastMessage: "今晚一起开黑吗？",
    lastMessageType: "text",
    lastTime: new Date(),
    unread: 2,
  },
  {
    id: 2,
    name: "技术大神",
    avatar: "https://tse3-mm.cn.bing.net/th/id/OIP-C.b7PMBD5HLWPqHAmW7hH-FQHaHZ?rs=1&pid=ImgDetMain",
    lastMessage: "语音消息",
    lastMessageType: "voice",
    lastTime: new Date(Date.now() - 3600 * 1000),
    unread: 0,
  },
]);

// 系统通知数据
const systemNotices = ref([
  {
    id: 1,
    title: "新版本发布",
    content: "陪玩之家2.0版本已上线，快来体验新功能吧！",
    time: new Date(Date.now() - 86400 * 1000),
    read: true,
  },
  {
    id: 2,
    title: "活动通知",
    content: "周末双倍积分活动即将开始，快来参与吧！",
    time: new Date(),
    read: false,
  },
]);

// 格式化时间
const formatTime = (time: Date) => {
  if (dayjs().isSame(time, "day")) {
    return dayjs(time).format("HH:mm");
  }
  return dayjs(time).format("MM/DD");
};

// 获取媒体消息图标
const getMediaIcon = (type: string) => {
  const icons = {
    voice: "mic",
    image: "image",
    video: "video",
  };
  return icons[type] || "file";
};

// 获取媒体消息标签
const getMediaLabel = (type: string) => {
  const labels = {
    voice: "[语音]",
    image: "[图片]",
    video: "[视频]",
  };
  return labels[type] || "[文件]";
};

// 打开聊天
const openChat = (chat: any) => {
  console.log("打开聊天:", chat);
};

// 查看通知
const viewNotice = (notice: any) => {
  console.log("查看通知:", notice);
};

// 发起新聊天
const startNewChat = () => {
  console.log("发起新聊天");
};
</script>

<style scoped>
.message-container {
  background: #f5f6fa;
  min-height: 100vh;

}

.custom-navbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.nav-icon {
  font-size: 20px;
  cursor: pointer;
}

.message-list {
  padding: 39px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.chat-list,
.notice-list {
  margin-bottom: 24px;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s;
}

.chat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-wrapper {
  position: relative;
  margin-right: 12px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f5222d;
  color: white;
  font-size: 12px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chat-info {
  flex: 1;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.time {
  font-size: 12px;
  color: #999;
}

.last-message {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-message {
  color: #667eea;
}

.notice-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.notice-item.unread {
  background: #f8f9fe;
}

.notice-icon {
  font-size: 24px;
  color: #667eea;
  margin-right: 12px;
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}

.notice-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.notice-text {
  font-size: 12px;
  color: #666;
}

.float-action {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 100;
}
</style>